<script setup>
import PageContainer from '@/components/PageContainer.vue'
import { useUserStore } from '@/stores'
import { ref } from 'vue'
import { userUpdateInfoService } from '@/api/user'
// 从仓库中拿到用户信息解构出我们需要的值
const { user: { username, nickname, email, id }, getUser } = useUserStore()

const userInfo = ref({ username, nickname, email, id })
// 配置校验规则
const rules = {
  // 昵称校验规则
  nickname: [
    { required: true, message: '请输入用户昵称', trigger: 'blur' },
    {
      pattern: /^\S{2,10}$/,
      message: '昵称必须是2-10位的非空字符串',
      trigger: 'blur'
    }
  ],
  // 邮箱校验规则
  email: [
    { required: true, message: '请输入用户邮箱', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
  ]
}
// 提交按钮
const formRef = ref()
const submitForm = async () => {
  // 验证表单
  const valid = await formRef.value.validate()
  // 如果验证通过
  if (valid) {
    await userUpdateInfoService(userInfo.value)
    // 通知user模块  更新用户信息
    await getUser()
    // 提示用户
    ElMessage.success('修改成功')
  }
} 
</script>

<template>
  <PageContainer title="基本资料">
    <!-- 表单部分 -->
    <page-container title="基本资料">
      <el-row>
        <el-col :span="12">
          <el-form :model="userInfo" :rules="rules" ref="formRef" label-width="100px" size="large">
            <el-form-item label="登录名称">
              <el-input v-model="userInfo.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="用户昵称" prop="nickname">
              <el-input v-model="userInfo.nickname"></el-input>
            </el-form-item>
            <el-form-item label="用户邮箱" prop="email">
              <el-input v-model="userInfo.email"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm">提交修改</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </page-container>
  </PageContainer>
</template>
